<template>
    <!-- 主题类型：商品 -->
    <div class="list-goods-component-container">
        <a class="list-goods-component-item-big" v-if="info.content.imagesList.length>=3"
           :href="info.content.detailUrl">
            <div class="list-goods-component-title-big">{{info.content.name}}</div>
            <div class="list-goods-component-img-big">
                <div class="list-goods-component-three" v-for="(image,index) in info.content.imagesList" v-if="index<3">
                    <img v-lazy="info.content.imagesList[index]"/>
                </div>
                <div class="clearBoth"></div>
            </div>
            <div class="list-goods-component-info-big">
                <div class="list-goods-component-info-name">
                    <img src="../assets/images/buy.png"/>&nbsp;{{info.content.thirdShopName}}
                </div>
                <div class="list-goods-component-info-price">¥{{info.content.preferPrice}}</div>
                <div class="clearBoth"></div>
            </div>
        </a>
        <a class="list-goods-component-item-single" :href="info.content.detailUrl" v-else>
            <div class="list-goods-component-title-single">{{info.content.name}}</div>
            <div class="list-goods-component-img-single">
                <img v-lazy="info.content.imagesList[0]"/>
            </div>
            <div class="list-goods-component-info-single">
                <div class="list-goods-component-info-price">¥{{info.content.preferPrice}}</div>
                <div class="list-goods-component-info-name">
                    <img src="../assets/images/buy.png"/>&nbsp;{{info.content.thirdShopName}}
                </div>
            </div>
            <div class="clearBoth"></div>
        </a>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .list-goods-component-container {
    }

    .list-goods-component-item-single, .list-goods-component-item-big {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
        display: block;
        text-decoration: none;
    }

    .list-goods-component-title-big, .list-goods-component-title-single {
        font-size: 1.0rem;
        /*font-weight: bold;*/
        line-height: 1.3rem;
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-goods-component-title-single {
        width: 66%;
        float: left;
        max-height: 2.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .list-goods-component-title-big {
        width: 100%;

        white-space: nowrap;
    }

    /*.list-goods-component-img-single,*/
    /*.list-goods-component-img-big{margin: 0.4rem auto; text-align: center;}*/
    .list-goods-component-img-single {
        width: 33%;
        padding-bottom: 33%;
        float: right;
        position: relative;
    }

    .list-goods-component-img-big {
        width: 100%;

        margin: 0.3rem auto;
    }

    .list-goods-component-img-single img,
    .list-goods-component-img-big img {
        width: 100%;
        height: 100%;
        position: absolute;
        -o-object-fit: cover;
        object-fit: cover;
        top: 0;
        left: 0;
    }

    .list-goods-component-img-single img {

    }

    .list-goods-component-img-big img {
        width: 100%;
        height: 100%;
        position: absolute;
        -o-object-fit: cover;
        object-fit: cover;
        top: 0;
        left: 0;
    }

    .list-goods-component-info-big {
        line-height: 1.6rem;
    }

    .list-goods-component-info-single {
        width: 65%;
        position: absolute;
        left: 0;
        bottom: 0.4rem;
    }

    .list-goods-component-info-name {
        color: #787878;
        font-size: 12px;
    }

    .list-goods-component-info-name img {
        height: 15px;
        vertical-align: text-bottom;
        margin-right: 0.4rem;
    }

    .list-goods-component-info-price {
        font-size: 1.0rem;
        color: #FB6C34;
    }

    .list-goods-component-three {
        width: 32.333%;
        margin: .3rem .5%;
        padding-bottom: 32.333%;
        float: left;
        position: relative;
    }
</style>